<template>
  <view v-if="shenheStatus == 0" class="complete">
    <!-- <view class="head">
      <view class="title" v-if="status == 0">
        <text>自动成为商户，进行收款</text>
      </view>
			<block v-else-if="status == 1">
				<view>
					<view class="icon-box">
					  <i
					    class="iconfont icon-clock-fill"
					  ></i>
					</view>
				</view>
				<view class="status-text">正在审核中</view>
				<view class="status-info">正在审核，请耐心等待</view>
			</block>
			
			<block v-else-if="status == 2">
				<view>
					<view class="icon-box">
						<i
							class="iconfont icon-reeor-fill"
						></i>
					</view>
				</view>
				<view class="status-text">审核失败</view>
				<view class="status-info">信息错误，请检查后重试</view>
			</block>
    </view> -->
    <view class="content">
      <!-- v-if="storeInfo.progress == 3" -->
      <!-- :status="storeInfo.status" -->
      <!-- @submit="getCompleteInfo()" -->
      <!-- @showTitle="showTitle" -->

      <payment
        v-if="storeInfo.progress == 3"
        :bind_store_id="bind_store_id"
        :info="storeInfo.merchant"
        :mini_id="storeInfo.mini_id"
      ></payment>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import payment from "../components/payment.vue";
export default {
  components: {
    payment,
    Shenhe,
  },
  data() {
    return {
      bind_store_id: "",
      storeInfo: {},
      mini_id: 0,
      status: 0,
    };
  },
  onLoad(option) {
    if (option.id) {
      this.bind_store_id = option.id;
			this.mini_id = option.mini_id;
      this.getCompleteInfo();
    }
  },
  methods: {
    showTitle(params) {
      this.status = params;
    },

    // 获取小程序完善信息
    async getCompleteInfo() {
      const res = await this.$allrequest.newStore.get_progress(
        {
          bind_store_id: this.bind_store_id,
        },
        true
      );
      if (res.code == 0) {
        this.storeInfo = res.data;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.complete {
  color: #262626;
  font-family: PingFang SC;
  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 24rpx;
    border-bottom: 24rpx solid #f2f2f2;
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 30rpx;
      image {
        width: 104rpx;
        height: 90rpx;
        margin-bottom: 20rpx;
      }
    }
    view {
      .icon-box {
        width: 130rpx;
        height: 130rpx;
        background: #ffffff;
        border-radius: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          color: #f0250e;
          font-size: 190rpx;
        }
      }
    }
    .status-text {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #262626;
      margin-top: 32rpx;
    }
    .status-info {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
      margin-top: 20rpx;
    }
    .steps {
      width: 100%;
      display: flex;
      margin-top: 40rpx;
      padding: 0 60rpx;
      .stepItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .circle {
          width: 34rpx;
          height: 34rpx;
          border-radius: 50%;
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 26rpx;
          text {
            display: block;
            width: 18rpx;
            height: 18rpx;
            border-radius: 50%;
            background-color: #bababd;
          }
        }
        ::before {
          content: "";
          position: absolute;
          width: calc(50% - 17rpx);
          height: 2rpx;
          background-color: #e6e6e6;
          top: 17rpx;
          left: 0;
        }
        ::after {
          content: "";
          position: absolute;
          width: calc(50% - 17rpx);
          height: 2rpx;
          background-color: #e6e6e6;
          top: 17rpx;
          left: calc(50% + 17rpx);
        }
      }
      .stepItem:nth-child(1) {
        ::before {
          height: 0;
        }
      }
      .stepItem:last-child {
        ::after {
          height: 0;
        }
      }
      .choosed {
        .circle {
          background-color: #fdf1f0;
          text {
            background-color: #f0250e;
          }
        }
      }
    }
    .reason {
      width: 702rpx;
      margin-top: 24rpx;
      padding: 24rpx;
      background-color: #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      text:nth-child(1) {
        font-weight: 500;
        margin-bottom: 10rpx;
      }
      text:nth-child(2) {
        color: #f0250e;
      }
    }
  }
  .success {
    display: flex;
    padding-top: 100rpx;
    font-size: 24rpx;
    color: #8c8c8c;
    justify-content: center;
  }
}
</style>
